<template>
  <div class="farm2_header_container">
    <img class="logo" :src="sysConfig.getLogoPath" alt="Logo" />
    <div class="farm2_sys_title">{{ sysConfig.getSysTitle }}</div>
  </div>
  <div class="farm2_user_info">
    <div class="username">{{ user.name }}</div>
    <img class="photo" src="\images\photo\photo.png" style="padding-right: 4px;" alt="Logo" />
    <div class="flags">
      <el-button @click="router.push('/home')" type="success" title="返回前台首页" size="small" icon="HomeFilled" circle />
      <el-button @click="reSetPassword" style="margin-left: 8px;" type="warning" title="修改密码" size="small" icon="Lock"
        circle />
      <el-button @click="goToLogin" style="margin-left: 8px;" index="/login" type="info" title="退出系统" size="small"
        icon="SwitchButton" circle />
    </div>
  </div>
  <div style="padding-left: 15px;padding-right: 15px;">
    <el-menu v-loading="isLoading" :default-active="activeIndex" :router="true" class="el-menu-vertical-demo"
      :collapse="false">
      <el-sub-menu v-for="menu in menus" :key="menu.id" :index="menu.id.toString()">
        <template #title>
          <el-icon>
            <Menu></Menu>
          </el-icon>
          <span>{{ menu.name }}</span>
        </template>
        <el-menu-item v-for="menu2 in menu.children " :key="menu2.id" :index="menu2.menukey">{{ menu2.name
          }}</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
  <User_from_password update-url="api/current/reset.password" ref="rePasswordForm"></User_from_password>
  <user_logout ref="logoutRef"></user_logout>
</template>
<script setup lang="ts">

import user_logout from '@/components/user/user_logout.vue';
import { reactive, ref } from 'vue';
import User_from_password from '@/views/system/localuser/components/user_form_password.vue';
import { useRoute, useRouter } from 'vue-router';
import { useSystemConfigStore } from '@/store/useSystemConfigStore';
import { useUserInfoStore } from '@/store/useUserInfoStore';
import notice from '@/components/msg/FarmNotice';
import Farm2Request from '@/service/remoteRequests/Farm2Request';
import { RequestTypeEnum } from '@/types/commons/RequestTypeEnum';
import type { DataResponse } from '@/types/commons/DataResponse';
import type { Menu } from '@/types/system/menu';
import type { User } from '@/types/system/user';
const sysConfig = useSystemConfigStore();
const userInfo = useUserInfoStore();

const activeIndex = ref();
const logoutRef = ref();
activeIndex.value = useRoute().path;
const router = useRouter();
const isLoading = ref(false);

const rePasswordForm = ref();
/**
 * 用户登出
 */
const goToLogin = () => {
  logoutRef.value.goToLogin();
}
/**
 * 修改密码
 */
const reSetPassword = () => {
  rePasswordForm.value.openWin([userInfo.$state.user.loginname]);
}


/**
 * 菜单信息
 */
const menus = reactive<Menu[]>([]);
/**
 * 用户信息
 */
const user = reactive<User>({ name: "", loginname: "", type: "", tags: [] });
/**
 * 初始化用户信息
 */
const initUserInfo = () => {


  Farm2Request.submit("api/current/user", RequestTypeEnum.post, isLoading, {}).then((dataResponse: DataResponse) => {
    Object.assign(menus, (dataResponse.data as { menus: [Menu] }).menus);
    Object.assign(user, (dataResponse.data as { user: User }).user)
    Object.assign(userInfo.$state.user, (dataResponse.data as { user: User }).user)
  }).catch((msg: Error) => {
    notice.byError(msg.message);
  });
}
initUserInfo();

router.afterEach((to) => {
  activeIndex.value = to.path;
});

</script>
<style scoped></style>
